<template>
  <a-modal
      :visible="getSystemTemplateVisible"
      :title="getSystemTemplateTitle"
      :getContainer="getSystemTemplateContainer"
      width='565px'
      class="system-template-modal"
      @ok="systemTemplateConfig.ok"
      @cancel="systemTemplateConfig.cancel"
  >
    <a-row class="system-template">
      <a-col v-for="(template, templateIndex) in getSystemTemplate" :key="templateIndex" :span="10">
        <div class="system-template-container">
          <h3>{{ template.title }}</h3>
          <div>
            <span class="system-template-container-title">
              {{ template.morning.title }}
            </span>
            <span class="system-template-container-value">
              <a-time-picker @change="(momen, time) => systemTemplatePickerChange(time, templateIndex, template.morning.key)"
                             :default-value="moment(template.morning.value, 'HH:mm')" format="HH:mm"/>
            </span>
          </div>
          <div v-if="template.afternoon">
            <span class="system-template-container-title">
              {{ template.afternoon.title }}
            </span>
            <span class="system-template-container-value">
              <a-time-picker @change="(momen, time) => systemTemplatePickerChange(time, templateIndex, template.afternoon.key)"
                             :default-value="moment(template.afternoon.value, 'HH:mm')" format="HH:mm"/>
            </span>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import moment from 'moment';

export default {
  name: "SystemTemplate",
  props: {
    systemTemplateConfig: {
      type: Object,
      default: () => ({}),
    }
  },
  methods: {
    moment,
    systemTemplatePickerChange(time, index, key) {
      this.$emit('updateSystemTemplateConfig', {
        time,
        index,
        key
      })
    }
  },
  computed: {
    getSystemTemplateVisible() {
      return this.systemTemplateConfig.visible;
    },
    getSystemTemplateTitle() {
      return this.systemTemplateConfig.title;
    },
    getSystemTemplate() {
      return this.systemTemplateConfig.templateConfig;
    },
    getSystemTemplateContainer() {
      return this.systemTemplateConfig.container;
    }
  }
}
</script>

<style scoped lang="less">
.system-template-modal {
  /deep/ .ant-modal-title {
    font-weight: bold;
    color: rgba(0, 0, 0, .65);
  }

  .system-template {
    display: flex;
    align-items: center;

    > div {
      width: 50%;
    }

    > div:first-child {
      margin-right: 24px;
    }

    .system-template-container {
      display: flex;
      flex-direction: column;
      min-height: 112px;

      > h3 {
        font-weight: bold;
        color: rgba(0, 0, 0, .65);
      }

      > div:not(:last-child) {
        margin-bottom: 16px;
      }

      .system-template-container-title {
        margin-right: 10px;
        margin-bottom: 16px;
      }
    }
  }
}

</style>
